<template>
  <div>
    <div id="container" class="amis-container"></div>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted, ref, watch } from 'vue'
import { loadSDK } from '@/utils/dynamicLoad'
const jsPaths = ['/amis/sdk/sdk.js']
const cssPaths = ['/amis/sdk/sdk.css', '/amis/sdk/helper.css', '/amis/sdk/iconfont.css']

const props = defineProps({
  // amis 配置 schema
  schema: {
    type: Object,
    required: true
  },
  // 参数
  params: {
    type: Object,
    default: () => ({})
  }
})
let amisInstance
// 初始化 amis 渲染器
const initAmis = () => {
  //@ts-ignore
  let amis = amisRequire('amis/embed')
  amisInstance = amis.embed(
    '#container',
    props.schema,
    {
      // 这里是初始 props，一般不用传。
      // locale: 'en-US' // props 中可以设置语言，默认是中文
    },
    {
      // 下面是一些可选的外部控制函数
      // 在 sdk 中可以不传，用来实现 ajax 请求，但在 npm 中这是必须提供的
      // fetcher: (url, method, data, config) => {},
      // 全局 api 请求适配器
      // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
      //
      // requestAdaptor(api) {
      //   // 支持异步，可以通过 api.mockResponse 来设置返回结果，跳过真正的请求发送
      //   // 此功能自定义 fetcher 的话会失效
      //   // api.context 中包含发送请求前的上下文信息
      //   return api;
      // }
      //
      // 全局 api 适配器。
      // 另外在 amis 配置项中的 api 也可以配置适配器，针对某个特定接口单独处理。
      // responseAdaptor(api, payload, query, request, response) {
      //   return payload;
      // }
      //
      // 用来接管页面跳转，比如用 location.href 或 window.open，或者自己实现 amis 配置更新
      // jumpTo: to => { location.href = to; },
      //
      // 用来实现地址栏更新
      // updateLocation: (to, replace) => {},
      //
      // 用来判断是否目标地址当前地址。
      // isCurrentUrl: url => {},
      //
      // 用来配置弹窗等组件的挂载位置
      // getModalContainer: () => document.getElementsByTagName('body')[0],
      //
      // 用来实现复制到剪切板
      // copy: content => {},
      //
      // 用来实现通知
      // notify: (type, msg) => {},
      //
      // 用来实现提示
      // alert: content => {},
      //
      // 用来实现确认框。
      // confirm: content => {},
      //
      // 主题，默认是 default，还可以设置成 cxd 或 dark，但记得引用它们的 css，比如 sdk 目录下的 cxd.css
      // theme: 'cxd'
      //
      // 用来实现用户行为跟踪，详细请查看左侧高级中的说明
      // tracker: (eventTracker) => {},
      //
      // Toast提示弹出位置，默认为'top-center'
      // toastPosition: 'top-right' | 'top-center' | 'top-left' | 'bottom-center' | 'bottom-left' | 'bottom-right' | 'center'
      ...props.params
    }
  )
}
onMounted(() => {
  loadSDK(jsPaths, cssPaths).then(() => {
    initAmis()
  })
})

// 销毁时清理
onUnmounted(() => {
  amisInstance && amisInstance.unmounted()
})
</script>

<style>
.amis-container {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px;
}
</style>
